import React, { useState, useEffect } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Table, Button, Input, Pagination, message } from "antd"
import { userListInpam, userListApi, userListRecord } from "@/services/system"
import { ColumnsType } from "antd/es/table"

import styles from "./userManagement.less"

const userManagement: React.FC = () => {

  /** *分页用***/
  const [current, setCurrent] = useState<number>(1) // 当前第几页
  const [size, setSize] = useState<number | undefined>(10) // 每页的数量
  const [total, setTotal] = useState<number>(0) // 数据总数
  const [pages, setPages] = useState<number>(1) // 总页数
  /** *分页用 end***/

  const [userName, setUserName] = useState<string>("") // 用户姓名
  const [type, setType] = useState<number>(0) // 类型（1.角色 2.科室 3.医院）
  const [typeId, setTypeId] = useState<number>(0) // 当type不为空是必传，值为对应类型的id

  const [loading, setLoading] = useState<boolean>(false)
  const [table, setTable] = useState<Array<userListRecord>>([])// 成员列表

  // 启用
  const enableFn = (record: userListRecord) => {
    console.log(record)
  }

  // 查看组员
  const viewGroupMembers = (record: userListRecord) => {
    console.log(record)
  }

  // 删除
  const del = (record: userListRecord) => {
    console.log(record)
  }

  // 编辑
  const edit = (record: userListRecord) => {
    console.log(record)
  }



  const columns: ColumnsType<any> = [
    {
      title: "序号",
      align: "center",
      width: "auto",
      render: (text: any, record: any, index: number) => {
        return <span>{(current - 1) * (size as any) + (index + 1)}</span>
      }
    },
    {
      title: "角色",
      dataIndex: "roleName",
      key: "roleName",
      align: "center",
      width: "auto",
    },
    {
      title: "用户名称",
      dataIndex: "name",
      key: "name",
      align: "center",
      width: "auto",
    },
    {
      title: "工号",
      dataIndex: "qqq",
      key: "qqq",
      align: "center",
      width: "auto",
    },
    {
      title: "医院",
      dataIndex: "hospitalName",
      key: "hospitalName",
      align: "center",
      width: "auto",
    },
    {
      title: "科室名称",
      dataIndex: "deptName",
      key: "deptName",
      align: "center",
      width: "auto",
    },
    {
      title: "职称",
      dataIndex: "jobTitleName",
      key: "jobTitleName",
      align: "center",
      width: "auto",
    },
    {
      title: "状态",
      dataIndex: "statusDsc",
      key: "statusDsc",
      align: "center",
      width: "auto",
    },
    {
      title: "创建时间",
      dataIndex: "createTime",
      key: "createTime",
      align: "center",
      width: "auto",
    },
    {
      title: "操作",
      align: "center",
      width: "270px",
      render: (text: string, record: any) => (
        <>
          <Button onClick={() => edit(record)} type="primary" size="small" >编辑</Button>
          <Button onClick={() => del(record)} style={{ margin: "0 15px" }} danger size="small" >删除</Button>
          <Button onClick={() => enableFn(record)} size="small" >启用</Button>
        </>
      )
    },

  ]




  // 切换页数
  const pageOnChange = (pageNumber: number, pageSize?: number | undefined) => {
    setSize(pageSize)
    setCurrent(pageNumber)
  }
  const showTotal = (total: number, range: number[]) => {
    const page = <div style={{ color: "#999" }}>
      共 {total} 条记录  第 <span style={{ color: "black" }} >{current}</span>   / {pages} 页
    </div>
    return page // `共${total}条记录  第${current}/${Math.ceil(total / 10)}页`
  }

  // 获取小组列表
  const initSysDeptList = async () => {
    setLoading(true)
    let obj: userListInpam = {
      userName,
      type,
      typeId,
      current,
      size
    }
    const [err, res] = await userListApi(obj)
    console.log(111, res)
    if (err) {
      setLoading(false)
      return message.error(err.message)
    }
    setLoading(false)
    setTable(res.data.records)
    setTotal(res.data.total)
    setPages(res.data.pages)
  }


  const userNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUserName(e.target.value)
  }


  const souEvent = () => {
    if (!userName) {
      message.info("请输入用户名称")
      return
    }
    initSysDeptList()
  }

  const rest = () => {
    setUserName("")
  }

  // 初始化
  useEffect(() => {
    initSysDeptList()
  }, [current, size])


  return (
    <div className={styles.userManagement} >
      <div className={styles.top}>
        <div className={styles.left} >
          全部用户（{total}）
          {/* <Button size="middle" type="primary" >新建用户</Button>
          <Button style={{ margin: " 0 10px" }} size="middle" type="primary" >导入</Button> */}
        </div>
        <div className={styles.right}>
          <Input value={userName} onChange={userNameChange} placeholder="用户名称" />
          <Button onClick={souEvent} style={{ margin: " 0 10px 0 40px" }} type="primary" size="middle" >搜索</Button>
          <Button onClick={rest} size="middle" >重置</Button>
        </div>
      </div>

      <div className={styles.content}>
        <Table
          bordered
          rowKey='id'
          columns={columns}
          dataSource={table}
          pagination={false}
        />
      </div>


      <Pagination
        style={{ textAlign: "center", paddingTop: "3px" }}
        size="small"
        total={total}
        hideOnSinglePage={false}
        showQuickJumper
        pageSize={size}
        showTotal={showTotal}
        onChange={pageOnChange}
      />



    </div >
  )
}

export default userManagement
